<!-- 车辆详情 -->
<template>
  <div class="dashboard-container vehicle-detail">
    <div class="app-container">
      <el-card shadow="never">
        <el-menu
          :default-active="activeMenu"
          mode="horizontal"
          @select="handoverMenu"
        >
          <el-menu-item index="basicInformation">基本信息</el-menu-item>
          <el-menu-item index="documentInformation">行驶证信息</el-menu-item>
        </el-menu>
        <div v-show="activeMenu === 'basicInformation'" class="basic" v-loading="variableSetObject.basicLoading" >
          <el-card shadow="never">
            <div class="forms">
              <el-form
                ref="vehicleData"
                :model="vehicleData"
                :rules="rules"
                :inline="true"
                label-width="92px"
              >
                <el-row>
                  <el-col :span="8">
                    <el-form-item prop="id" label="车牌编号：">
                      <span v-if="variableSetObject.inputHiding">{{ vehicleData.id }}</span>
                      <el-input
                        v-else
                        v-model="vehicleData.id"
                        disabled
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="licensePlate" label="车牌号码：">
                      <span v-if="variableSetObject.inputHiding">{{
                        vehicleData.licensePlate
                      }}</span>
                      <el-input
                        v-else
                        v-model="vehicleData.licensePlate"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="truckTypeName" label="车型名称：">
                      <span v-if="variableSetObject.inputHiding">{{
                        vehicleData.truckTypeName
                      }}</span>
                      <el-select
                        v-else
                        v-model="vehicleData.truckTypeId"
                        placeholder="请选择"
                        clearable
                      >
                        <el-option
                          v-for="item in carTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item prop="allowableVolume" label="车辆体积：">
                      <span v-if="variableSetObject.inputHiding">{{
                        vehicleData.allowableVolume
                      }}</span>
                      <el-input
                        v-else
                        v-model.number="vehicleData.allowableVolume"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="allowableLoad" label="车辆载重：">
                      <span v-if="variableSetObject.inputHiding">{{
                        vehicleData.allowableLoad
                      }}</span>
                      <el-input
                        v-else
                        v-model.number="vehicleData.allowableLoad"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="deviceGpsId" label="GPSID：">
                      <span v-if="variableSetObject.inputHiding">{{
                        vehicleData.deviceGpsId
                      }}</span>
                      <el-input
                        v-else
                        v-model="vehicleData.deviceGpsId"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="image">
                <span class="title">图片信息</span>
                <div class="read-img">
                  <div class="img-box" @click="disablePrompts">
                    <!-- 非编辑状态 -->
                    <div v-if="variableSetObject.inputHiding" class="normality">
                      <!-- 本来没有图片 -->
                      <div v-if="!uploadImgs.length" class="no-pictures">
                        <img
                          src=""
                          alt=""
                        />
                      </div>
                      <!-- 原本就有图片 -->
                      <div v-else>
                        <img
                          v-for="(item, index) in uploadImgs"
                          :key="index"
                          :src="item"
                          alt=""
                        />
                      </div>
                    </div>
                    <!-- 编辑状态 -->
                    <div v-if="!variableSetObject.inputHiding" class="upload">
                      <!-- 本来没有图片 -->
                      <div v-if="variableSetObject.exampleFigure && !uploadImgs.length">
                        <img
                          src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/2a6cbcb0-93d0-41a3-ae18-248ee68c1def.png"
                        />
                        <img
                          src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/95f1ad63-c8f0-4be3-a5e9-c3c9320de30f.png"
                        />
                      </div>
                      <!-- 有图片 -->
                      <div v-else>
                        <div v-for="(item, index) in uploadImgs" :key="index">
                          <i class="el-icon-delete" @click="deleteImgs(index, uploadImgs, vehicleData.picture)"></i>
                          <img :src="item" />
                        </div>
                      </div>
                      <el-upload
                        action=""
                        list-type="picture-card"
                        :limit="numMax"
                        :disabled="variableSetObject.disabled"
                        :on-exceed="imgsMaxWarning"
                        :before-upload="handeleImges"
                        :http-request="uploadCarImage"
                      >
                        <i slot="default" class="el-icon-upload2"></i>
                        <div slot="file" slot-scope="{ file }">
                          <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url"
                          />
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)"
                            >
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span
                              v-if="!variableSetObject.inputHiding"
                              class="el-upload-list__item-delete"
                            >
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </el-upload>
                    </div>
                    <el-dialog :visible.sync="variableSetObject.dialogVisible">
                      <img width="100%" :src="dialogImageUrl" />
                    </el-dialog>
                  </div>
                  <span v-if="!variableSetObject.inputHiding" class="comments"
                    >注：图片大小不超过5M；仅能上传 PNG JPEG
                    JPG类型图片；建议上传400*300尺寸的图片；最多上传2张</span
                  >
                </div>
              </div>
            </div>
          </el-card>
          <div class="footer">
            <el-button
              v-if="variableSetObject.inputHiding"
              type="warning"
              @click="variableSetObject.inputHiding = false"
              >编辑
            </el-button>
            <div v-else class="btn">
              <el-button type="warning" @click="save">保存</el-button>
              <el-button class="cancel" @click="offBasicEdit('basicInformation')">取消</el-button>
            </div>
          </div>
        </div>
        <div v-show="activeMenu === 'documentInformation'" class="document">
          <el-card shadow="never">
            <div class="forms">
              <el-form
                ref="documentInfo"
                :model="documentInfo"
                :rules="documentRules"
                :inline="true"
                label-width="120px"
              >
                <el-row>
                  <el-col :span="8">
                    <el-form-item prop="transportCertificateNumber" label="行驶证号：">
                      <span v-if="variableSetObject.infoHiding">{{ documentInfo.transportCertificateNumber === null ? '--' : documentInfo.transportCertificateNumber }}</span>
                      <el-input
                        v-else
                        v-model="documentInfo.transportCertificateNumber"
                        placeholder="请输入行驶证号码"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="engineNumber" label="发动机编号：">
                      <span v-if="variableSetObject.infoHiding">{{
                        documentInfo.engineNumber === null ? '--' : documentInfo.engineNumber
                      }}</span>
                      <el-input
                        v-else
                        v-model="documentInfo.engineNumber"
                        placeholder="请输入发动机编号"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="registrationDate" label="注册时间：">
                      <span v-if="variableSetObject.infoHiding">{{
                        documentInfo.registrationDate === null ? '--' : documentInfo.registrationDate
                      }}</span>
                      <!-- 记得改下拉框 -->
                      <el-date-picker
                        v-else
                        v-model="documentInfo.registrationDate"
                        type="date"
                        placeholder="选择注册日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item prop="mandatoryScrap" label="强制报废日期：">
                      <span v-if="variableSetObject.infoHiding">{{
                        documentInfo.mandatoryScrap === null ? '--' : documentInfo.mandatoryScrap
                      }}</span>
                      <el-date-picker
                        v-else
                        v-model="documentInfo.mandatoryScrap"
                        type="date"
                        placeholder="选择强制报废日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="overallQuality" label="整备质量：">
                      <span v-if="variableSetObject.infoHiding">{{
                        documentInfo.overallQuality === null ? '--' : documentInfo.overallQuality
                      }}</span>
                      <el-input
                        v-else
                        v-model.number="documentInfo.overallQuality"
                        placeholder="填入整备质量"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="expirationDate" label="检验有效期：">
                      <span v-if="variableSetObject.infoHiding">{{
                        documentInfo.expirationDate === null ? '--' : documentInfo.expirationDate
                      }}</span>
                      <el-date-picker
                        v-else
                        v-model="documentInfo.expirationDate"
                        type="date"
                        placeholder="填入检验有效期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item prop="allowableWeight" label="核定载质量：">
                      <span v-if="variableSetObject.infoHiding">{{
                        documentInfo.allowableWeight === null ? '--' : documentInfo.allowableWeight
                      }}</span>
                      <el-input
                        v-else
                        v-model.number="documentInfo.allowableWeight"
                        placeholder="请写入核定载质量"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="validityPeriod" label="有效期：">
                      <span v-if="variableSetObject.infoHiding">{{
                        documentInfo.validityPeriod === null ? '--' : documentInfo.validityPeriod
                      }}</span>
                      <el-date-picker
                        v-else
                        v-model="documentInfo.validityPeriod"
                        type="date"
                        placeholder="选择行驶证有效期限"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="image">
                <span class="title">图片信息</span>
                <div class="read-img">
                  <div class="img-box" @click="disablePrompts">
                    <!-- 非编辑状态 -->
                    <div v-if="variableSetObject.infoHiding" class="normality">
                      <!-- 本来没有图片 -->
                      <div v-if="!infoImgs.length" class="no-pictures">
                        <img
                          src=""
                          alt=""
                        />
                      </div>
                      <!-- 原本就有图片 -->
                      <div v-else>
                        <img
                          v-for="(item, index) in infoImgs"
                          :key="index"
                          :src="item"
                          alt=""
                        />
                      </div>
                    </div>
                    <!-- 编辑状态 -->
                    <div v-if="!variableSetObject.infoHiding" class="upload">
                      <!-- 本来没有图片 -->
                      <div v-if="variableSetObject.exampleFigure && !infoImgs.length">
                        <img
                          src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/086942c3-6c43-432d-80f1-64f53b424be9.png"
                        />
                        <img
                          src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/4002ebba-8a62-4a5c-b64c-358189456eb6.png"
                        />
                      </div>
                      <!-- 有图片 -->
                      <div v-else>
                        <div v-for="(item, index) in infoImgs" :key="index">
                          <i class="el-icon-delete" @click="deleteImgs(index, infoImgs, documentInfo.picture)"></i>
                          <img :src="item" />
                        </div>
                      </div>
                      <el-upload
                        action=""
                        list-type="picture-card"
                        :limit="numMax"
                        :disabled="variableSetObject.disabled"
                        :on-exceed="imgsMaxWarning"
                        :before-upload="handeleImges"
                        :http-request="uploadInfoImage"
                      >
                        <i slot="default" class="el-icon-upload2"></i>
                        <div slot="file" slot-scope="{ file }">
                          <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url"
                          />
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)"
                            >
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span
                              v-if="!variableSetObject.infoHiding"
                              class="el-upload-list__item-delete"
                            >
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </el-upload>
                    </div>
                    <el-dialog :visible.sync="variableSetObject.dialogVisible">
                      <img width="100%" :src="dialogImageUrl" />
                    </el-dialog>
                  </div>
                  <span v-if="!variableSetObject.infoHiding" class="comments"
                    >注：图片大小不超过5M；仅能上传 PNG JPEG
                    JPG类型图片；建议上传400*300尺寸的图片；最多上传2张</span
                  >
                </div>
              </div>
            </div>
          </el-card>
          <div class="footer">
            <el-button
              v-if="variableSetObject.infoHiding"
              type="warning"
              @click="variableSetObject.infoHiding = false"
              >编辑
            </el-button>
            <div v-else class="btn">
              <el-button type="warning" @click="saveInfo">保存</el-button>
              <el-button class="cancel" @click="offBasicEdit('documentInformation')">取消</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { truckDetails, imgUpload, truckTypeUpdate, getCarTypeList, truckTypeDrivingLicenseDetail, truckTypeDrivingLicense } from '@/api/transit'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      headers: {
        Authorization: Cookies.get('TOKEN')
      },
      activeMenu: 'basicInformation',
      truckId: '', // 车辆id
      vehicleData: {}, // 车辆数据
      documentInfo: {}, // 行驶证信息
      rules: {
        id: [{ required: true, message: '', trigger: 'blur' }],
        licensePlate: [
          { required: true, message: '请填写车牌号', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5][A-Z]{1}[0-9]{5,6}$/, message: '车牌号不符合规范，规范示例：京A12345', trigger: 'blur' }
        ],
        truckTypeName: [{ required: true, message: '请选择车辆类型', trigger: 'blur' }],
        allowableVolume: [{ required: true, message: '请输入车辆体积大小', trigger: 'blur' }],
        allowableLoad: [{ required: true, message: '请输入车辆载重大小', trigger: 'blur' }],
        deviceGpsId: [
          { required: true, message: '请输入车辆的GPS设备ID', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{1,20}$/, message: 'GPS设备ID不符合规范，规范示例：0xABC123DEF', trigger: 'blur' }
        ]
      }, // 基本信息校验规则
      documentRules: {
        transportCertificateNumber: [
          { required: true, message: '请填入行驶证号', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5][A-Z][0-9]{18}$/, message: '行驶证格式不正确，示例：苏A1234567890', trigger: 'blur' }
        ], // 行驶证号
        engineNumber: [
          { required: true, message: '请填入发动机编号', trigger: 'blur' },
          { pattern: /^[0-9A-Z]{1,}$/, message: '发动机编号应为纯数字或者数字与大写字母混合组成', trigger: 'blur' }
        ], // 发动机编号
        registrationDate: [{ required: true, message: '请选择注册时间', trigger: 'blur' }], // 注册时间
        mandatoryScrap: [{ required: true, message: '请选择国家强制报废日期', trigger: 'blur' }], // 国家强制报废日期
        overallQuality: [{ required: true, message: '请输入整备质量', trigger: 'blur' }], // 整备质量
        expirationDate: [{ required: true, message: '请选择检验有效期', trigger: 'blur' }], // 检验有效期
        allowableWeight: [{ required: true, message: '请输入核定载质量', trigger: 'blur' }], // 核定载质量
        validityPeriod: [{ required: true, message: '请选择行驶证有效期', trigger: 'blur' }] // 行驶证有效期
      }, // 行驶证信息校验规则
      carTypeList: [], // 车辆类型数组
      uploadImgs: [], // 基本信息图片地址的中转数组
      infoImgs: [], // 证件信息图片地址的中转数组
      variableSetObject: {
        inputHiding: true, // 基本信息编辑状态的控制变量
        infoHiding: true, // 证件信息编辑状态的控制变量
        dialogVisible: false, // 图片预览弹框的控制变量
        exampleFigure: true, // 示例图片的控制变量
        disabled: false, // 上传禁用变量
        basicLoading: true // 基础信息加载变量
      }, // 变量集合对象
      dialogImageUrl: '', // 图片预览弹框的图片地址
      numMax: 2
    }
  },
  created() {
    // 初始化车辆详情
    this.truckDetails()
    // 初始化模糊搜索下拉框数据
    this.getCarTypeList()
    // 进入页面读取localStorage的index信息决定开启那一个页面
    const index = localStorage.getItem('index')
    if (index) {
      this.activeMenu = index
    }
  },
  destroyed() {
    // 离开页面的时候删除index数据
    const index = localStorage.getItem('index')
    if (index) {
      localStorage.removeItem('index')
    }
  },
  methods: {
    handoverMenu(newIndex) {
      this.activeMenu = newIndex
      if (newIndex === 'documentInformation' && Object.keys(this.documentInfo).length === 0) {
        // 初始化行驶证信息
        this.truckTypeDrivingLicenseDetail()
      }
    },
    // 获取车辆详情信息
    async truckDetails() {
      const { data } = await truckDetails(this.$route.query.id)
      this.vehicleData = data
      console.log(this.vehicleData)
      this.variableSetObject.basicLoading = false
      if (this.vehicleData.picture) {
        this.vehicleData.picture = this.vehicleData.picture.split(',')
        if (this.vehicleData.picture.length === 1) {
          // console.log('长度为1')
          this.uploadImgs.push(this.vehicleData.picture[0])
        } else if (this.vehicleData.picture.length === 2) {
          // console.log('长度为2')
          this.uploadImgs.push(
            this.vehicleData.picture[0],
            this.vehicleData.picture[1]
          )
        }
      } else {
        this.vehicleData.picture = []
      }
      this.maxUpload(this.vehicleData.picture)
    },
    // 点击取消退出编辑数据回退
    offBasicEdit(index) {
      if (index) {
        localStorage.setItem('index', index)
      }
      location.reload()
    },
    // 获取下拉框数据
    async getCarTypeList() {
      const { data } = await getCarTypeList()
      this.carTypeList = data
      // console.log(this.carTypeList)
    },
    // 删除图片
    deleteImgs(index, arr1, arr2) {
      // console.log(index)
      arr1.splice(index, 1)
      arr2.splice(index, 1)
      this.maxUpload(arr2)
      this.variableSetObject.disabled = false
    },
    // 基本信息页图片最大上传数量判断
    maxUpload(array) {
      if (array.length === 0) {
        this.numMax = 2
      } else if (array.length === 1) {
        this.numMax = 1
      } else if (array.length === 2) {
        this.numMax = 0
        this.variableSetObject.disabled = true
      }
      console.log(this.numMax)
    },
    // 当上传禁用的时候的提示
    disablePrompts() {
      if (this.variableSetObject.disabled === true) {
        this.imgsMaxWarning()
      }
    },
    // 图片上传数量超过限制警告
    imgsMaxWarning() {
      this.$message.warning('最多只能上传两张图片')
    },
    handeleImges(file) {
      // console.log(123)
      // 上传图片关闭示例图数组显示
      this.variableSetObject.exampleFigure = false
    },
    // 基本信息上传图片
    async uploadCarImage(params) {
      const formData = new FormData()
      formData.append('file', params.file)
      const res = await imgUpload(formData)
      this.vehicleData.picture.push(res.data)
      // 当图片数组的长度为2的时候禁用上传功能
      if (this.vehicleData.picture.length === 2) {
        this.variableSetObject.disabled = true
      }
    },
    // 基本信息页点击确定保存修改并刷新页面返回非编辑状态
    async save() {
      this.vehicleData.picture = this.vehicleData.picture.join(',')
      // console.log(this.vehicleData)
      // console.log(this.vehicleData.id)
      const res = await truckTypeUpdate(
        this.vehicleData.id,
        this.vehicleData
      )
      console.log(res)
      // const { data } = await truckDetails(this.vehicleData.id)
      // console.log(data)
      location.reload()
    },
    handlePictureCardPreview(file) {
      // console.log(file)
      this.dialogImageUrl = file.url
      this.variableSetObject.dialogVisible = true
    },
    // 获取行驶证详情
    async truckTypeDrivingLicenseDetail() {
      const { data } = await truckTypeDrivingLicenseDetail(this.$route.query.id)
      this.documentInfo = data
      console.log(this.documentInfo)
      if (this.documentInfo.picture) {
        this.documentInfo.picture = this.documentInfo.picture.split(',')
        if (this.documentInfo.picture.length === 1) {
          // console.log('长度为1)
          this.infoImgs.push(this.documentInfo.picture[0])
        } else if (this.documentInfo.picture.length === 2) {
          // console.log('长度为2)
          this.infoImgs.push(this.documentInfo.picture[0], this.documentInfo.picture[1])
        }
      } else {
        this.documentInfo.picture = []
      }
      this.maxUpload(this.documentInfo.picture)
    },
    // 行驶证页上传图片
    async uploadInfoImage(params) {
      const formData = new FormData()
      formData.append('file', params.file)
      const res = await imgUpload(formData)
      this.documentInfo.picture.push(res.data)
      // 当图片数组的长度为2的时候禁用上传功能
      if (this.documentInfo.picture.length === 2) {
        this.variableSetObject.disabled = true
      }
      console.log(this.documentInfo.picture)
    },
    // 点击确定发送修改行驶证页面数据的请求
    async saveInfo() {
      this.vehicleData.picture = this.vehicleData.picture.join(',')
      console.log(this.documentInfo)
      // console.log(this.vehicleData.id)
      const res = await truckTypeDrivingLicense(
        this.vehicleData.id,
        this.documentInfo
      )
      console.log(res)
      const { data } = await truckTypeDrivingLicenseDetail(this.$route.query.id)
      console.log(data)
      // location.reload()
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>

<style lang="scss" scoped>
.app-container {
  padding: 24px;
  .basic, .document {
    .forms {
      height: 455px;
    }
    .el-form-item {
      // margin:0 80px 18px 0;
      margin-bottom: 0;
      .el-input {
        margin-bottom: 18px;
      }
      ::v-deep .el-form-item__label {
        font-weight: 500;
        text-align: left;
      }
      ::v-deep .el-input__inner {
        width: 214px;
      }
    }
    .image {
      display: flex;
      margin-top: 10px;
      .title {
        width: 62px;
        font-size: 14px;
        margin-left: 10px;
        margin-right: 25px;
      }
      .read-img {
        width: 100%;
        .img-box {
          display: flex;
          img {
            width: 212px;
            height: 160px;
            border-radius: 5px;
            margin-right: 20px;
            border: 1px solid #e5e7ec;
          }
          .upload {
            display: flex;
          }
          ::v-deep .el-upload--picture-card {
            width: 210px;
            height: 160px;
          }
          ::v-deep .el-upload-list__item {
            width: 210px;
            height: 160px;
            margin: 0 20px 8px 0;
          }
          .avatar-uploader {
            width: 212px;
            height: 160px;
            text-align: center;
            // line-height: 160px;
            border: 1px dashed #e5e7ec;
            border-radius: 10px;
            ::v-deep .el-upload {
              height: 160px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              &:hover {
                color: #e15536;
              }
              .upload-img {
                margin-top: 8px;
                font-size: 14px;
              }
            }
          }
        }
        .comments {
          font-size: 12px;
          color: #c0c0d8;
        }
      }
    }
    .footer {
      display: flex;
      justify-content: center;
      padding: 30px 0px 16px 0px;
      .cancel {
        width: 100px;
        height: 40px;
        color: #f3917c;
        background-color: #ffeeeb;
        border: 1px solid #f3917c;
        &:hover {
          color: #fff;
          background-color: #ff6b4a;
        }
      }
    }
  }
  ::v-deep .el-card__body {
    padding: 0 30px;
    border-bottom: 1px solid #e5e7ec;
    // height: 500px;
  }
  .el-menu--horizontal {
    margin-bottom: 35px;
  }
  .el-menu--horizontal > .el-menu-item {
    height: 58px;
    border: none;
    color: #20232a;
  }
  .el-menu-item {
    padding: 0 25px;
  }
  ::v-deep .is-active {
    border: none;
    font-size: 16px;
    font-weight: 700;
    &::after {
      content: '';
      display: block;
      margin-top: -4px;
      height: 2px;
      transform: scale(0.8);
      border: 2px solid #e15536 !important;
    }
  }
}
</style>
